<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui-v2.6.8/layui/css/layui.css">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
 
<table class="layui-hide" id="test" lay-filter="test"></table>
 
<script type="text/html" id="toolbarDemo">
    <div class="layui-inline">
      <label>书名搜索</label>
      <div class="layui-input-inline">
        <input type="text" name="bookName" id="findDataByName"  autocomplete="off" class="layui-input">
      </div>
      <!-- 给搜索按钮绑定一个单击函数 -->
      <button type="button" onclick="findDataByName()"  class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm">点击搜索</button>
      &nbsp;<label>日期搜索</label>
      <!-- 按照日期的开始和截至时间  -->
      <!-- 如果截至时间为空那么就将截至时间置为当前时间 -->
      <form id="form-change-password" action="#" method="post" style="display: inline;">
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" id="date1" name="time1" autocomplete="off" placeholder="开始日期"  class="layui-input">
     </div>~~
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" id="date2" name="time2" autocomplete="off"  placeholder="截至日期" class="layui-input">
      </div>
      <button type="submit"onclick="findData()" id="find" class="layui-btn  layui-btn-sm  layui-btn-radius layui-btn-normal">点击搜索</button>
      </form>
</script>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
              
          
<script src="../layui-v2.6.8/layui/layui.js"></script>
<script src="../js/jquery-2.1.0.min.js"></script>
<script src="../js/layer.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 --> 
 
<script>
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#test'
    //查询数据的路径
  //  ,url:"http://localhost:8080/books/queryAllBook"
    ,url:'http://localhost:8080/books/queryAllBook'
    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
      title: '提示'
      ,layEvent: 'LAYTABLE_TIPS'
      ,icon: 'layui-icon-tips'
    }]
    ,title: '书籍信息表'
    ,totalRow:true
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field:'bookID', title:'书籍编号', width:100, fixed: 'left', sort: true,totalRowText:'合计'}
      ,{field:'bookName', title:'书名', width:120}
      ,{field:'bookCounts', title:'数量', width:150, edit: 'text',sort: true,totalRow:true, templet: function(res){
        if(res.bookCounts>=10){
          return '<span style="color: #F581B1;">'+ res.bookCounts +'</span>'
        }else{
          return  '<span>'+ res.bookCounts +'</span>'
        }
        // 变换字体没有什么实际用处
      }}
      ,{field:'bookDate', title:'录入时间', width:120, edit: 'text', sort: true}
      ,{field:'detail', title:'详情', edit:'text',width:300}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
    ,page: true
  });

  //点击之后怎么改变reder的url
  //头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      //自定义头工具栏右侧图标 - 提示
      case 'LAYTABLE_TIPS':
        layer.alert('这是工具栏右侧自定义的一个图标按钮');
      break;
    };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    //console.log(obj)
    if(obj.event ==='del'){
      layer.confirm('真的删除行么', function(index){
        delCarouselById(data.bookID);
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      //ajax操作
      layer.open({
               type:1 //Page层类型
               ,skin: 'layui-layer-molv'
               ,area: ['500px', '370px']
               ,title: ['编辑书本信息','font-size:18px']
               ,btn: ['确定', '取消'] 
               ,shadeClose: true
               ,shade: 0 //遮罩透明度
               ,maxmin: true //允许全屏最小化
               ,content:$("#window")  //弹窗路径
               ,success:function(layero,index){
	                 $('#bookName').val(data.bookName),
	                 $('#bookCounts').val(data.bookCounts),
	                 $('#detail').val(data.detail)
               },yes:function(index,layero){
                 //给表单绑定一个监听事件
                $.ajax({
                type:"POST",
                url:'http://localhost:8080/books/update',
                data:$("#form-change-password").serialize()
                ,success:function(data){
                   //data为后端数据的返回值
                   if(data!=null||data!=''){
              			  layer.alert('编辑成功',{icon:1,title:'提示'},function(i){
              				  layer.close(i);
                        layer.close(index);//关闭弹出层
                        $("#book")[0].reset()//重置form
              			  })
                      table.reload('test',{//重载表格el为挂载的表格
              				  page:{
              					  curr:1
              				  }
              			  })
                    }
                }//事件成功事件
            })
               },end: function () {
                 //点击取消之后触发的事件
                 $("#window").css("display","none");
                }
           });
    }
  });
});
//删除记录
function delCarouselById(id) {
			$.get("http://localhost:8080/books/deleteBook?id=" + id,
				function(data, status) {
					layer.msg('删除成功');
				});
		}
    //加载laydate
layui.use('laydate',function(){
        var laydate=layui.laydate;
        laydate.render({
          elem:'#date2'
          // 默认时间选择器 
        });
      });
      layui.use('laydate',function(){
        var laydate=layui.laydate;
        laydate.render({
          elem:'#date1'
          // 默认时间选择器 
        });
      });
//表单搜索刷新
function findData(){
  layui.table.reload("test",{
    page:{
      curr:1
    },where:{
      time1:$('#date1').val(),
      time2:$('#date2').val()
    },
    url:'http://localhost:8080/books/queryAllBook',
    method:'post'
  });
  return false;
}
//书名搜索功能
function findDataByName(){
  layui.table.reload("test",{
    page:{
      curr:1
    },where:{
      bookName:$('#findDataByName').val()
    },
    url:'http://localhost:8080/books/queryBookByBookName',
    method:'get'
  });
  return false;
}
//加载laydate
layui.use('laydate',function(){
        var laydate=layui.laydate;
        laydate.render({
          elem:'#date2'
          // 默认时间选择器 
        });
      });
      layui.use('laydate',function(){
        var laydate=layui.laydate;
        laydate.render({
          elem:'#date1'
          // 默认时间选择器 
        });
      });
</script>
<div class="site-text" style="margin: 5% ;margin-left: -37px;display: none;" id="window"  target="test123">	
  <form class="layui-form" id="book" method="post" lay-filter="example">
    <div class="layui-form-item">
      <label class="layui-form-label">书名</label>
      <div class="layui-input-block">
        <input type="text" id="bookName" name="bookName" lay-verify="required" autocomplete="off" readonly class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">数量</label>
      <div class="layui-input-block">
        <input type="number" id="bookCounts" name="bookCounts" lay-verify="required" autocomplete="off" placeholder="修改数量" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">详情</label>
      <div class="layui-input-block">
        <input type="text" id="detail" name="detail" lay-verify="required" autocomplete="off" placeholder="详情" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
    </div>
  </form>
</div>
</body>
</html>